<template>
	<el-drawer title="接口预览" v-model="visible" append-to-body size="1000" destroy-on-close @closed="$emit('closed')">
        <div style="padding: 0px 20px 20px 20px">
            <el-form :model="form" :rules="rules" ref="dialogForm" label-position="top" v-loading="formLoading">
                <el-form-item label="接口地址">
                    <el-input v-model="url">
                        <template #prepend>
                            <div v-if="form.requestMethod == 7">POST</div>
                            <div v-else>GET</div>
                        </template>
                        <template #append>
                            <el-button type="primary" :loading="testLoading" @click="clickTest" style="color:#409eff">测试接口</el-button>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="请求参数" v-if="inputList.length>0">
                    <jd-form-table v-model="inputList" :addBtn="false" placeholder="暂无数据">
						<el-table-column prop="val" label="参数名">
							<template #default="scope">
								<el-input v-model="scope.row.field" placeholder="" readonly></el-input>
							</template>
						</el-table-column>
                        <el-table-column prop="open" label="参数值" align="center">
							<template #default="scope">
								<el-input v-model="scope.row.defaultValue" placeholder=""></el-input>
							</template>
						</el-table-column>
						<el-table-column prop="open" label="状态" width="80" align="center">
							<template #default="scope">
								<el-switch v-model="scope.row.open"></el-switch>
							</template>
						</el-table-column>
					</jd-form-table>
                </el-form-item>
                <el-form-item label="响应结果">
                    <jd-code-editor ref="editor" v-model="responseData" mode="javascript" theme="dracula" :options="{styleActiveLine: false}"></jd-code-editor>
                </el-form-item>
            </el-form>
        </div>
	</el-drawer>
</template>

<script>
    import { defineAsyncComponent } from 'vue';
	const jdCodeEditor = defineAsyncComponent(() => import('@/components/jdCodeEditor'));
	import config from "@/config";

	export default {
        components: {
            config,
			jdCodeEditor
		},
		emits: ['success', 'closed'],
        props: {
			previewId: {type: Number, default: 0},
		},
		data() {
			return {
				visible: false,
				//表单数据
				form: {
                    id: null,
					type: null,
					name: null,
					url: null,
					requestMethod: "0",
					responseType: "json",
					query: null,
					requestParams: [],
					ip: null,
					databaseId: '0',
					dataType: "2",
					checkType: 0,
					requestHeaders: [],
					processing: null,
					remark: null,
					paramType: "form",
                },
                formLoading: false,
				testLoading: false,
                responseData: " ",
                url: '',
                inputList: [],
			}
		},
		mounted() {
            this.loadConfig();
		},
		methods: {
			//显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				return this
			},
            //获取配置信息
            async loadConfig(){
                this.formLoading = true;

                this.url = `${config.API_URL}/system/interface/response/${this.previewId}`
                var res = await this.$API.app.interface.getParams.get(this.previewId);
                if (res.code == 200){
                    this.inputList = res.data;
                    this.formLoading = false;
                }
                this.formLoading = false;
            },
			// 测试接口
			async clickTest(){
                let data = {
                    paramList: this.inputList,
                    id: this.previewId
                }
                this.testLoading = true;
                var res = await this.$API.app.interface.test.post(data);
                if (res.code == 200){
                    this.responseData = JSON.stringify(res.data, null, 4);
                } else {
                    this.responseData = JSON.stringify(res, null, 4);
                }
                this.testLoading = false;
			},
			//表单注入数据
			setData(data){
				Object.assign(this.form, data);
			}
		}
	}
</script>

<style>
</style>
